import React from 'react';
import './index.css';

export default class extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            currentType: '企业',
        };

        // this.handleChangeType = this.handleChangeType.bind(this);
    }

    handleChangeType(type) {
        console.log('type', type);
        this.setState({ currentType: type });
    }

    render() {
        return (
            <div className="fp-page">
                <div className="qi-type">
                    <span
                        className={
                            this.state.currentType === '企业' ? 'active' : ''
                        }
                        onClick={() => this.handleChangeType('企业')}
                    >
                        企业
                    </span>

                    <span
                        className={
                            this.state.currentType === '非企业性单位'
                                ? 'active'
                                : ''
                        }
                        onClick={() => this.handleChangeType('非企业性单位')}
                    >
                        非企业性单位
                    </span>

                    <span
                        className={
                            this.state.currentType === '个人' ? 'active' : ''
                        }
                        onClick={() => this.handleChangeType('个人')}
                    >
                        个人
                    </span>
                </div>

                <div style={{ margin: '20px' }}>
                    <label htmlFor="is_zy">名称</label>
                    <input type="text" id="is_zy" />
                </div>

                {this.state.currentType !== '个人' && (
                    <div style={{ margin: '20px' }}>
                        <label htmlFor="is_zy">税号</label>
                        <input type="text" id="is_zy" />
                    </div>
                )}

                {this.state.currentType !== '个人' && (
                    <div style={{ margin: '20px' }}>
                        <label htmlFor="is_zy">是否增值税专用发票</label>
                        <input type="text" id="is_zy" />
                    </div>
                )}
            </div>
        );
    }
}
